<template>
	<div class="firstpage" >
	    <!-- 轮播图区域 -->
		<rollimg class="rollimg"></rollimg>
		<!-- 首页内容区域  热门单品-->
		<div class="hotSale">

			  <div class="hotSale_line">
			  	   <div class="line"> </div>
			  	       <h2 class="hotSale_line_text"> 热门单品<i class="iconfont icon-huo"></i> </h2>
			  	   <div class="line"> </div>
			  </div>


			  	<!-- 热门单品展示区域 -->
			  	<!-- 1 -->
					<div class="hootsale_img">
						   <a v-for="(img,index) in hotSale_img1" :key="index" class="hootsale_img_solo" @click="select(img.id)">
						   	   <img :src="img.src" width="180px" height="220px"><br>
						   	   <span>{{img.content}}</span>
						   </a>
					</div>
					<!-- 2 -->
                    <div class="hootsale_img">
						   <a v-for="(img,index) in hotSale_img2" :key="index" class="hootsale_img_solo" @click="select(img.id)" >
						   	   <img :src="img.src" width="180px" height="220px"><br>
						   	   <span>{{img.content}}</span>
						   </a>
					</div>
             
		</div>
          
	                 
                    

	</div>
</template>
<script>
import rollimg from './rollImg.vue'

	export default {
		data() {
			return {
                   hotSale_img1:[{src:'../../../static/img/hotSale/c25dd.jpg',content:'VANS Style 36【Retro Sports】',id:"/shopsGoods/3232323c000"},
                   {src:'../../../static/img/hotSale/9856362ce.jpg',content:'adidas Originals 男 KAVAL FZ HOODY 套头衫',id:"/clothesGoods/1214435"},
                   {src:'../../../static/img/hotSale/b8b55ec9bdba9.jpg',content:'ABLE JEANS 男式3D立体修身瘦腿裤牛仔长裤',id:"/pathGoods/dsscxm899"},
                   {src:'../../../static/img/hotSale/c6e575678.jpg',content:'adidas Originals  NMD_R1 W 休闲运动鞋',id:"/shopsGoods/po11112200"}],

                   hotSale_img2:[{src:'../../../static/img/hotSale/24c3706b4.jpg',content:'adidas Originals 男 KAVAL GRP TEE 短袖T恤',id:"/clothesGoods/22322232gff44"},
                   {src:'../../../static/img/hotSale/4ff111967320.jpg',content:'Vans 男 KAVAL  套头衫',id:"/clothesGoods/6467fg"},
                   {src:'../../../static/img/hotSale/f406974b3.jpg',content:'adidas Originals NMD_R1 休闲运动鞋',id:"/shopsGoods/2232337788"},
                   {src:'../../../static/img/hotSale/8129c6c1a66d7.jpg',content:'VANS AP The OG 66 Cool PO Hood',id:"/clothesGoods/5653323"}]
			}
		},
		components: {
			rollimg
		},
             methods:{
				 select:function(id){
					    this.$router.push({path:`${id}`})
				 }
				     
			 }

	}
</script>
<style>
	.firstpage{
		width: 100%;
		height: 1000px;
		margin-bottom: 50px;
		/*display: flex;
		justify-content: center;*/
		/*background-color: skyblue;*/
	}

	.rollimg{
		display: block;
		margin:0 auto;
	}

	.hotSale{
		width: 100%;
		height: 650px;
		/*background-color: yellowgreen;*/

	}

    
	.hotSale_line{
		text-align: center;
		  margin:0 auto;
		  margin-top:30px;
		  width: 70%;
		  height: 40px;
		  line-height: 40px;
		  /*border-bottom: 1px solid #607d8b;*/
		  /*background-color: red;*/
	}
	.line{
		display: inline-block;
		width: 200px;
		height: 10px;
		border-bottom: 1px solid #607d8b;
		position: relative;
		top:-5px;
        
	}

	.hotSale_line_text{
		display: inline-block;
		color: #333;
		font-family:'SimHei','新宋体';

	}

	/*热卖单品的火的icon*/
	.icon-huo{
		color: #ffc107;
	}


	.hootsale_img{
		width: 80%;
		height: 260px;
		margin:30px auto;
		display: flex;
		justify-content: center;

	}

	/*热门图片单个*/
    .hootsale_img_solo{
    	width: 180px;
    	height: 260px;
    	margin-left: 30px;
		color: #333;
    	text-align: center;
		background: rgb(214, 227, 233);
    	transition:all 0.5s;
    	font-size: 13px;
    	font-family: 'SimHei'

    }
    .hootsale_img_solo:hover{
    	box-shadow: 10px 10px 20px #e3dfdf;
    	cursor: pointer; 
        border-bottom-right-radius: 30px;
		background: #f7cfa3;
    }


</style>